<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购买界面</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <style>
        * {
            list-style: none;
        }
        li {
            margin-top: 40px;
        }
        table {
            margin: auto;
            width: 80%;
        }
        table tr {
            width: 100%;
            height: 50px;
        }
        table td {
            width: 40%;
        }
    </style>
</head>
<body>
<!-- 导航栏部分 -->
<nav class="navbar" role="navigation" style="background-color: #1CCE63;border-color: #BBBBBB;border-width: 1px;">
    <div class="container-fluid" style="width: 100%;text-align: center;">
        <!-- <a class="navbar-brand"style="color: white;font-family: ;" href="#">中药在线平台</a> -->
        <img th:src="@{/img/shopName.png}" height="50"/>
    </div>
</nav>
<!--中间部分-->
<div style="width: 100%;float: left">
    <div id="mid" style="width: 85%;margin:auto;">
        <div style="float: left;margin-left: 20px;width: 30%">
            <img th:src="@{${medicine.getImage()}}" alt="样品图" width="100%">
        </div>
        <div style="float: left;">
            <ul>
                <li>
                    药材名称:
                    <span th:text="${medicine.getName()}"></span>
                </li>
                <li>
                    价格:
                    <span th:text="${medicine.getPrice()}"></span>
                </li>
                <li>
                    规格:
                    <span th:text="${medicine.getSpecif()}"></span>
                </li>
                <li>
                    <div>
                        <select name="quantity" id="" style="float: left;width: 40px;padding: 2px">
                            <option class="option" value="1" >1</option>
                            <option class="option" value="2" >2</option>
                            <option class="option" value="3">3</option>
                        </select>
                        <div style="float: left;margin-left: 10px;">
                            <a href="" id="add" style="color: white;background: red;text-underline: none;padding: 5px" >加入购物车</a>
                        </div>
                        <div style="float: left;margin-left: 10px;">
                            <a href="#" style="color: white;background: red;text-underline: none;padding: 5px">立即购买</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--详情部分-->
<div style="float: left;margin-top: 30px;width: 100%;">
    <div class="navbar" role="navigation" style="background-color: #1CCE63;border-color: #BBBBBB;border-width: 1px;width: 100%;">
    <div class="container-fluid" style="width: 100%;">
        <center>
            <span style="font-size: 22px;line-height: 50px;">商品详情</span>
        </center>
    </div>
</div>

    <div>
        <table>
            <tr>
                <td>
                    药品编号:
                    <span id="id" th:text="${medicine.getId()}"></span>
                </td>
                <td>
                    药品类别:
                    <span th:text="${medicine.getType()}">养生</span>
                </td>
            </tr>
            <tr>
                <td>
                    药品名称:
                    <span th:text="${medicine.getName()}"></span>
                </td>
                <td>
                    有效期:
                    <span th:text="${#dates.format(medicine.getPeriodOfValidity(),'yyyy-MM-dd')}"></span>
                </td>
            </tr>
            <tr>
                <td>
                    药品规格:
                    <span th:text="${medicine.getSpecif()}"></span>
                </td>
                <td>
                    库存量:
                    <span th:text="${medicine.getAmount()}"></span>
                </td>
            </tr>
        </table>
    </div>

    <div style="width: 80%;text-align: center;margin: 50px auto;">
        <div><h2>药品简介</h2></div>
        <textarea style="width:500px;height:100px;" th:text="${page}"></textarea>
    </div>


</div>
<script>
    $(function () {
        var $add = $("#add");
        var $tip=1;
        $add.click(function () {
            $(".option").each(function () {
                if(this.selected){
                  $tip=this.value;
                }
            })
            this.href="/user/add_car?medId="+$("#id")[0].innerHTML+"&quantity="+$tip;
        });
    });

</script>
</body>
</html>